<!--相册功能 开始-->
<link rel="stylesheet" type="text/css" href="{$Css}photo.css">
<link rel="stylesheet" type="text/css" href="{$Css}photoswipe.css">
<script src="{$Js}jquery.lazyload.js" type="text/javascript"></script>
<!-- photoswipe 之前先引用klass,如果需要提高加载速度,可以给 script 加上 defer 标记/属性-->
<script src="{$Js}klass.min.js" type="text/javascript"></script>
<script src="{$Js}code.photoswipe-3.0.5.min.js" type="text/javascript"></script>
<SCRIPT type=text/javascript>
     /* 添加DOMContentLoaded 事件监听,类似于jQuery的 ready函数. 
     //设置 PhotoSwipe绑定为 id为Gallery的容器下的所有<a>标签.点击就会激活 
     */ 
    (function(window, PhotoSwipe){
        document.addEventListener('DOMContentLoaded', function(){
            var options = {},
            instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
        }, false);
    }(window, window.Code.PhotoSwipe));
</SCRIPT>

<script type=text/javascript> 
    $(document).ready( 
        function($){
            $("#Gallery img").lazyload({ 
                placeholder : "{$Images}grey.gif", 
                effect : "fadeIn"
        }); 
}); 
</script>
<style>body{BACKGROUND-COLOR: #ececec; margin:0px auto;} div{ color: #FFF; }</style>
<div style="HEIGHT: 373px; margin:0px auto" id="main" role="main">
    <ul id="Gallery" class="gallery">
       <infolist id="n" channelid='$ChannelID'  empty="$Think.lang.NoInformation">
       	   <notempty name="n.InfoPicture">
               <li style="position: absolute; display: list-item; top: 0px; left: 74px">
                   <a href="{$n.InfoPicture}"><img alt="{$n.InfoTitle}" src="{$n.InfoPicture}"/>
                   <p>{$n.InfoTitle}</p></a>
               </li>
           </notempty>
       </infolist>
   </ul>
</div>
<script type="text/javascript" src="{$Js}jquery.imagesloaded.js"></script>
<script type="text/javascript" src="{$Js}jquery.wookmark.min.js"></script>
<script type="text/javascript">
    (function ($){    //要图片载入完成之后，才能进行瀑布流布局
          $('#Gallery').imagesLoaded(function() {
                $('#Gallery li').wookmark({
                  autoResize: true, // This will auto-update the layout when the browser window is resized.
                  container: $('#main'), // Optional, used for some extra CSS styling
                  offset: 4, // Optional, the distance between grid items
                  itemWidth: 150 // Optional, the width of a grid item
                });
          });
    })(jQuery);
</script>
<!--相册功能 结束-->